<template>
  <div>
    <div class="form_box">
      <img
        class="title_imgs"
        src="../../../assets/images/organization/yuangong.png"
        alt=""
      />

      <el-form
        ref="form"
        :model="form"
        label-width="115px"
        size="medium"
        :rules="rules"
        :disabled="addtype == 2 ? true : false"
      >
        <div class="clearfix title_text">
          <div class="title_box">
            <img
              class="title_img"
              src="../../../assets/images/organization/yg.png"
              alt=""
            />
            <div style="margin-left: 20px">{{ title }}</div>
          </div>
        </div>
        <el-form-item label="员工姓名：" prop="username">
          <el-input
            placeholder="请输入员工姓名"
            v-model="form.username"
          ></el-input>
        </el-form-item>

        <el-form-item label="员工账号：" prop="phone">
          <el-input
            placeholder="请输入员工手机账号"
            v-model="form.phone"
          ></el-input>
        </el-form-item>

        <el-form-item label="设置密码：" prop="password">
          <el-input
            type="password"
            placeholder="请输入员工手机账号"
            v-model="form.password"
          ></el-input>
        </el-form-item>

        <el-form-item label="组织架构：" prop="superior">
          <el-cascader
            style="width: 100%"
            v-model="form.superior"
            :options="treeData"
            :props="{ multiple: true }"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="数据权限：" prop="datas">
          <el-select v-model="form.datas" placeholder="请选择">
            <el-option label="默认" value="1"> </el-option>
            <el-option label="自定义" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.datas == 2" prop="dataslist">
          <el-cascader
            style="width: 100%"
            v-model="dataslist"
            :options="treeData"
            :props="{ multiple: true }"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="入职时间：" prop="hiredate">
          <el-date-picker
            v-model="form.hiredate"
            align="right"
            type="date"
            placeholder="选择入职日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="账号状态：" prop="sensitive">
          <el-switch
            v-model="form.sensitive"
            active-value="1"
            inactive-value="2"
          >
          </el-switch>
        </el-form-item>
        <el-form-item v-if="addtype" label="职位状态：" prop="station">
          <el-switch v-model="form.station" active-value="1" inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="addtype" label="离职时间：" prop="over">
          <el-date-picker
            v-model="form.over"
            align="right"
            type="date"
            placeholder="选择入职日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="button_box">
        <el-button class="quxiao" @click="cancel">取消</el-button>
        <el-button class="danger" v-if="addtype" @click="del">删除</el-button>
        <el-button class="button" type="primary" @click="submit"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 区分编辑还是添加
      addtype: "",
      title: "新增员工",
      dataslist: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              picker.$emit("pick", new Date())
            }
          }
        ]
      },
      treeData: [
        {
          value: 1,
          label: "一级 1",
          children: [
            {
              value: 4,
              label: "二级 1-1",
              children: [
                {
                  value: 9,
                  label: "三级 1-1-1"
                },
                {
                  value: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        }
      ],
      form: {
        sensitive: "1"
      },
      rules: {
        username: [
          { required: true, message: "请输入员工姓名", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入员工手机账号", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        superior: [
          { required: true, message: "请选择上级组织", trigger: "blur" }
        ],
        dataslist: [
          { required: true, message: "请选择数据权限", trigger: "blur" }
        ],
        hiredate: [
          { required: true, message: "请选择入职时间", trigger: "blur" }
        ],
        datas: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
        station: [
          { required: true, message: "请选择职位状态", trigger: "blur" }
        ],
        over: [{ required: true, message: "请选择离职时间", trigger: "blur" }]
      }
    }
  },
  mounted () {
    if (localStorage.getItem("ps_key") == 1) {
      this.addtype = this.$route.params.type
      this.title = "编辑员工"
    } else if (localStorage.getItem("ps_key") == 2) {
      this.addtype = this.$route.params.type
      this.title = "员工详情"
    }

    console.log(this.addtype)
  },
  methods: {
    del () {
      this.$confirm("确定删除所选成员？", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "error",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .center(() => {
          this.$message({
            message: "删除已取消"
          })
        })
    },
    cancel () {
      this.$router.back()
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate(val => {
        if (val) {
          console.log(this.form)
        }
      })
    }
  }
}
</script>

<style scoped>
body {
  background-color: #fafcff;
}
.quxiao {
  width: 149px;
  height: 52px;
  border-radius: 4px;
  color: #555555;
  opacity: 1;
  border: 1px solid #555555;
}
.danger {
  width: 149px;
  height: 52px;
  border: 1px solid #fd0e0e;
  color: #fd0e0e;
}
.button_box {
  margin-top: 80px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.button {
  width: 149px;
  height: 52px;
  background: #3f75ff;
  color: #fff;
  box-shadow: 0px 4px 8px 0px #95b3ff;
  border-radius: 4px 4px 4px 4px;
}
.title_imgs {
  width: 380px;
  height: 310px;
  position: absolute;
  right: 100px;
  top: 200px;
}
.clearfix {
  padding: 20px;
}
.override-input {
  width: auto !important;
  /* 或者针对宽度使用其它合适的值 */
}
.elses {
  display: flex;
  /* align-items: center; */
}
.elses_text {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #949191;
  /* display: inline-block; */
}
/deep/ .el-input {
  width: 440px;
}
.title_box {
  display: flex;
  align-items: center;
}
.title_img {
  width: 40px;
  height: 40px;
}
</style>
